<!-- eslint-disable vue/multi-word-component-names -->
<template>
 <div>
   <el-breadcrumb separator="/">
     <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
     <el-breadcrumb-item>权限管理</el-breadcrumb-item>
     <el-breadcrumb-item>权限列表</el-breadcrumb-item>
   </el-breadcrumb>
 <div class="box">
 <el-table
 ref="singleTable"
 :data="tableData"
  highlight-current-row
   style="width: 100%;padding: 10px"
 :border="true"
     >

 <el-table-column type="index" width="50"> </el-table-column>
 <el-table-column width="390" property="authName" label="权限名称">
 </el-table-column>
 <el-table-column property="path" width="390" label="路径">
 </el-table-column>
 <el-table-column
  property="level"
  width="390"
  label="权限等级"
  >
   <template slot-scope="scope">
     <el-tag v-if="scope.row.level==='0'">一级</el-tag>
     <el-tag  v-else-if="scope.row.level==='1'"type="success">二级</el-tag>
     <el-tag  type="warning" v-else>三级</el-tag>
   </template>

 </el-table-column>
   </el-table>
  </div>
 </div>
</template>

<script>
import {getRightListAPI} from "@/api/user";

export default {
  // components: { breadcrumb },
  created() {
    this.getRightlist();
  },
  data() {
    return {
      tableData: [],
    };
  },
  methods: {
    //获取列表的所有数据
    async getRightlist() {
const res= await getRightListAPI()
      // console.log(res)
      if(res.meta.status!==200)return this.$message.error('获取数据失败')
      this.tableData=res.data
      console.log(this.tableData)
      this.$message.success('获取数据成功')
    },
 }
}
</script>

<style lang="less" scoped>
.box {
  padding: 20px;
 //border: 1px solid #333;
}
.el-table{
  //border: 1px solid #333;
}
.el-table{
  padding: 0 !important;
}
</style>